<template>
    <uni-popup ref="popupRef" type="bottom" border-radius="10px 10px 0 0">
        <view class="popup-box">
            <view class="header-box">
                <view class="title">操作</view>
            </view>
            <view class="content-box">
                <view class="grid-item" @tap="edit">
                    <up-icon name="edit-pen" color="#303133" size="28"></up-icon>
                    <view class="text">编辑</view>
                </view>
                <view class="grid-item" @tap="deleteHandler">
                    <up-icon name="trash" color="#303133" size="28"></up-icon>
                    <view class="text">删除</view>
                </view>
            </view>
            <view class="footer">
                <slot name="footer"></slot>
            </view>
        </view>
    </uni-popup>
</template>
<script setup>
const emits = defineEmits(['success'])
const props = defineProps({
    title: {
        type: String,
        default: ''
    }
})

const popupRef = ref()
const item = ref()

const open = (data) => {
    item.value = data
    popupRef.value.open()
}
const close = () => {
    popupRef.value.close()
}

const edit = () => {
    qly.dialog.toast({title: '功能开发中'})
    close()
}

const deleteHandler = async () => {
    const res = await qly.dialog.messageBox({
        title: '确定删除吗？',
        message: '删除后无法恢复',
    })
    console.log('res', res)
    if (res) {
        const res = await qly.api.user.information.delete({id: item.value.id})
        if (res.code === 1) {
            close()
            qly.dialog.success('删除成功').catch()
            emits('success')
        } else {
            qly.dialog.apiError(res).catch()
        }
    }
}
defineExpose({
    open
})
</script>
<style scoped lang="scss">
.popup-box {
    border-radius: 24rpx 24rpx 0 0;
    background-color: #fff;
    
    .header-box {
        text-align: left;
        padding: 24rpx 32rpx;
        box-sizing: border-box;
        
        .title {
            font-size: 32rpx;
        }
    }
    
    .content-box {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 16rpx;
        
        .grid-item {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background-color: #f5f5f5;
            padding: 24rpx;
            border-radius: 50%;
            width: 80rpx;
            height: 80rpx;
            margin: 0 auto 160rpx;
            
            .text {
                color: #606266;
            }
        }
    }
}
</style>
